<template>
	<view class="container">
	<view class="main-box" style="width: 100%;height: calc(100vh - 270rpx);">
		<view class="uni-margin-wrap" style="height: 100%;">
			<swiper-item style="overflow-y: scroll;">
				<view class="swiper-box " style="margin-top: 4rpx;">
					<view class="uni-margin-wrap">
						<swiper
							class="screen-swiper square-dot" 
							circular="true" 
							indicator-color="#ffffff"
							indicator-active-color="#0f72ff"
							indicator-dots="true" 
							autoplay="true"
							interval="5000" 
							duration="500">
							<swiper-item v-for="(item, index) in carouselList" :key="index" @click="navToAdvUrls(item)">
								<image :src="weburl + item.path" mode="scaleToFill"></image>
							</swiper-item>
						</swiper>
					</view>
				</view>
				
				<view  class="border-b-line padding-lr-sm padding-bottom-xs">
					<view class="index_marquee" style="padding-top: 6px;">
						<gbro-marquee v-if="broadcastData" broadcastType='text' direction="left" :broadcastIconIsDisplay="true"
							:broadcastData='broadcastData' :broadcastStyle='broadcastStyle' style="width: 100%">
						</gbro-marquee>
					</view>
				</view>
				<view class="padding-lr-sm" style="padding-top:15px;">
					<scroll-view class="scroll-view_H_Tab" style="" scroll-x="true">
						<view @click="ACXTabChange(0)" :class="ACXTabIndex==0?'tab-acx active-tab':'tab tab-acx'">
							<!-- <uni-icons type="contact" size="30"></uni-icons> -->
							<image style="display: inline-block;width: 40rpx;height: 40rpx;background-color: transparent;" src="../../static/img/aqiang/home/ACX/quanbu.png" mode=""></image>
							<span>全部电影</span>
						</view>
						<view @click="navToUrl('/pages/article/fenzhang')" :class="ACXTabIndex==1?'tab-acx active-tab':'tab tab-acx'">
							<image style="width: 40rpx;height: 40rpx;background-color: transparent;" src="../../static/img/aqiang/home/ACX/dianshitai.png" mode=""></image>
							<span>分账规则</span>
						</view>
		<!-- 								<view @click="ACXTabChange(2)" :class="ACXTabIndex==2?'tab-acx active-tab':'tab tab-acx'">
							<image style="width: 40rpx;height: 40rpx;background-color: transparent;" src="../../static/img/aqiang/home/ACX/fuli.png" mode=""></image>
							<span>福利活动</span>
						</view> -->
						<!-- <view @click="ACXTabChange(3)" :class="ACXTabIndex==3?'tab-acx active-tab':'tab tab-acx'">
							<image style="width: 40rpx;height: 40rpx;background-color: transparent;" src="../../static/img/aqiang/home/ACX/shipindianshi.png" mode=""></image>
							<span>片单</span>
						</view> -->
					</scroll-view>
				</view>
				
				<view class="padding-lr-sm" style="width: 100%;" v-if="ACXTabIndex == 0">
					<view v-for="(item,index) in movieIndex" class="margin-top" style="width: 100%;display: flex;justify-content: space-between;background-color: #ccc;padding: 10rpx;border-radius: 10rpx;">
						<image style="width: 40%;height: 100%;"  mode="widthFix" :src="weburl + item.img" ></image>
						<view class="detail" style="width: 58%;color: #666;">
							<view class=" uni-ellipsis" style="font-size: 40rpx;">{{item.title}}</view>
							<view class=" uni-ellipsis " >{{item.region}} / {{item.minute}}分钟</view>
							<view class="" style="display: flex;flex-wrap: wrap;">
								<span v-for="(i,j) in item.type" class="tag-type text-sm ">{{i}}</span>
							</view>
							<view class=" ">上映时间{{item.time}}</view>
							<view class="">评分: {{item.rating}} ({{item.evaluation}}人评价)</view>
							<view class="" style="height: 100rpx;"></view>
							<view class="uni-flex" style="justify-content: space-between;">
								<span style="color: #e63564;">票价：¥{{item.price}}</span>
								<span @click="nowBuyHandle(item)" style="background-color: rgb(230, 53, 100);border: 0.5px solid rgb(230, 53, 100);color: rgb(255 255 255);padding: 0px 10px;border-radius: 5px;">购票</span>
							</view>
						
						</view>
					</view>
					
				</view>
				<view class="padding-lr-sm" v-if="ACXTabIndex == 1">1</view>
				<view class="padding-lr-sm" v-if="ACXTabIndex == 2">2</view>
				
			</swiper-item>
		</view>
		<uni-popup ref="popup" type="center">
			<view class="" style="width: 90vw;height: 51vh;background-color: #fff;">
				<uni-section title="确认订单" type="line">
					<!-- <view class="right-more">强势围观</view> -->
				</uni-section>
				
				<view class="padding">
					<view class="">{{popitem.title}}</view>
					<view class="uni-flex" style="justify-content: space-between;">
						<view class="">原价 
							<span style="color: #e63564;margin-left: 20rpx;">¥</span> 
							<span style="color: #e63564;font-size: 50rpx;">{{popitem.price}}</span> 
							<span style="color: #e63564;">（元）</span>
						</view>
						<view class="">
							<uni-number-box v-model="canbuy" @change="changeValue" />
						</view>
					</view>
					<view class="margin-top-lg">
						备注：当前会员等级限购{{numberValue}}张，每日限购一次。<br>
						<p v-if="canbuy > 0">当前您能购买{{canbuy}}张。</p>
						<p style="color: #e63564" v-else>
						  您当前的会员等级购票权益已用尽。
						</p>
						
						<!-- <input type="password" password v-model="password" placeholder="请输入支付密码" /> -->
					</view>
					<view class="margin-top-lg uni-flex" style="justify-content: space-between;">
						<view class="">总计：<span style="color: #e63564;">¥{{popTotal}}</span></view>
					</view>
					
					<view class="margin-top-xl" style="text-align: right;">
						<button @click="$refs.popup.close()" style="display: inline-block;margin-right: 20rpx;">取消购买</button>
						<button @click="beforePwd" style="display: inline-block;background-color: rgb(230, 53, 100);color: #fff;">确认购买</button>
					</view>
				</view>
				
			</view>
		</uni-popup>
	</view>
	
	<view :class="[modalName == 'showPayPwd' ? 'cu-modal show' : 'cu-modal']">
		<view class="cu-dialog">
			<view class="cu-bar bg-white justify-end">
				<view class="content">支付密码</view>
				<view class="action">
					<text class="cuIcon-close text-red" @click="hideModal()"></text>
				</view>
			</view>
			<view class="padding-xl">
				<view>
					<view class="flex-box padding-bottom-sm text-sm"></view>
					<validcode ref="validcode" :maxlength="6" :isPwd="true" @finish="finish"></validcode>
				</view>
			</view>
		</view>
	</view>
	</view>
</template>	


<script>
	import gbroMarquee from '@/components/GBroMarquee/marquee.vue';
	import validcode from "@/components/validCode/validCode.vue";
	export default {
		components: {
			gbroMarquee,
			validcode
		},
		
		data() {
			return {
				modalName: null,
				ACXTabIndex:0,
				broadcastData: '',
				broadcastStyle: {
					speed: 2, //每秒3个字
					font_size: "28", //字体大小(upx)
					text_color: "#000000", //字体颜色
					back_color: "#f3f4f8", //背景色
				},
				canbuy: 0, //剩余购买数量
				numberValue: 20,//影票默认购买数量
				movieIndex:[],
				popitem:[],
				password:"",
				popnum:1,
				popTotal:0,
				carouselList:[],
				swiperLength: 0,
				passInputTips:""
			};
		},
		
		onLoad: function (option) {
			this.loadBanners();
			this.loadMovieIndex();
			this.loadNotice();
		},
		onPullDownRefresh() {

			this.loadMoreText = "加载更多",
			this.showLoadMore = false;
			
			setTimeout(() => {
				this.loadMovieIndex();
			}, 300);
		},
		methods: {
			ACXTabChange(e){
				this.ACXTabIndex = e;
			},
			changeValue(e){
				this.popnum = e;
				this.popTotal = this.popitem.price*e;
			},
			nowBuyHandle(e){
				this.popitem = e;
				this.popTotal = e.price;
				this.$refs.popup.open()
			},
			navToUrl: function(url) {
				if(url == "/pages/help/service"){
					return uni.switchTab({
						url: url
					});
					
				}
				return uni.navigateTo({
					url: url
				});
			},			
			//acx影院
			loadMovieIndex:function(){
				let timestamp = this.helper.now();
				var token = 'token';
				var info = uni.getStorageSync("userinfo");
				if (info.token) {
					token = info.token;
				}
				let sign = this.helper.setSign(['token=' + token, 'timestamp=' + timestamp]);
				this.helper.req({
					api: "getMovieIndex",
					timestamp: timestamp,
					data: {
						token: token,
						},
					header: {
						sign: sign
					},
					method: 'GET',
				}).then(res => {
					this.movieIndex = res.data.data;
					this.numberValue = res.data.data[0].rights
					this.canbuy = res.data.data[0].canbuy
					// 在请求成功后关闭下拉刷新
					uni.stopPullDownRefresh();
								
				})
			},
			loadBanners: function() {
				// uni.showLoading({
				// 	title: "数据加载中",
				// 	mask: true
				// })
				let timestamp = this.helper.now();
				let sign = this.helper.setSign(['type=home', 'timestamp=' + timestamp]);
				this.helper.req({
					api: "getBanners",
					timestamp: timestamp,
					data: {
						type: 'home'
					},
					header: {
						sign: sign
					},
					method: 'GET',
				}).then(res => {
					// console.log(res);
					this.carouselList = res.data.data.list;
					this.swiperLength = this.carouselList.length;
					uni.hideLoading();
				});
			},
			beforePwd:function(){
				this.$refs.validcode.clear();
				this.passInputTips = "金额：" + this.popTotal;
				this.modalName = "showPayPwd";
			},
			orderCreate:function(){
				this.helper.checkLogin();
				var token = 'token';
				var info = uni.getStorageSync("userinfo");
				if (info.token) {
					token = info.token;
				}
				let timestamp = this.helper.now();
				let sign = this.helper.setSign(['token=' + token, 'timestamp=' + timestamp, 'id='+this.popitem.id, 'num='+this.popnum, 'amount='+this.popTotal,'pwd='+this.password]);
				this.helper.req({
					api: "createMovieOrder",
					timestamp: timestamp,
					data: {
						token: token,
						id:this.popitem.id,
						num:this.popnum,
						amount:this.popTotal,
						pwd:this.password
					},
					header: {
						sign: sign
					},
					method: 'POST',
				}).then(res => {
					console.log(res)
					uni.showModal({
						title: "提示",
						content: res.data.message,
						showCancel: false,
						confirmText: "确定",
						success: function(res) {
				
						}
					})
					this.$refs.popup.close();
					uni.hideLoading();
				})
			},
			finish: function(e) {
				this.modalName = null;
				if(e.length < 6){
					uni.showToast({
						title:"密码无效",
						icon:"none"
					})
					return;
				}
				this.password = e;
				this.orderCreate();
			},
			hideModal: function() {
				this.modalName = null
			},
			loadNotice: function() {
				let timestamp = this.helper.now();
				let sign = this.helper.setSign(['timestamp=' + timestamp]);
				this.helper.req({
					api: "getNotice",
					timestamp: timestamp,
					header: {
						sign: sign
					},
					method: 'GET',
				}).then(res => {
					// console.log(res);
					this.broadcastData = [res.data.data.notice, res.data.data.notice];
				})
			}
		}
	};
	
</script>

<style lang="scss" scoped>
	$width: 100%;
	.bg-img{
		background-image: url('../../static/img/aqiang/home/home-bg.jpg');
		background-size: 100% 100%;
		
	}
	.tag-type{
		border: 1rpx solid #999;
		padding: 0rpx 6rpx;
		border-radius: 10rpx;
		font-size: 20rpx;
		margin-right: 4rpx;
	}
	page {
		// background-color: #f3f4f8;
		background-color: #ffffff;
		
		
	}
	.navAvator{
		width: 40rpx;
		height: 40rpx;
		background-color: #333;
		border-radius: 50%;
		margin-right: 20rpx;
	}
	.main-box{
		// padding: 0 20rpx;
		.grid-item-box {
			flex: 1;
			// position: relative;
			/* #ifndef APP-NVUE */
			display: flex;
			/* #endif */
			flex-direction: column;
			align-items: center;
			justify-content: center;
			padding: 15px 0;
		}
		.jingxuan-box{
			position: relative;
			.right-more{
				position: absolute;
				right: 20rpx;
				font-size: 16rpx;
			}
		}
		.dianying-box{
			display: flex;
			width: 100%;
			background-color: #f00;
			overflow-x: scroll;
			// justify-content: space-between;
		}
		.scroll-view_H_Tab{
			width: 100%;
			white-space: nowrap;
			.tab{
				background-color: #ddd;
				color: #666;
				padding: 10rpx 20rpx;
				
				// display: inline-block;
			}
			.tab-acx{
				padding: 20rpx 8px;
				margin-right: 10rpx;
				width: 200rpx;
				display: inline-block;
				border-radius: 10rpx;
				
				&>image{
					display: inline-block;
					vertical-align: middle;
					margin-right: 10rpx;
				}
			}
			.active-tab{
				background-color: rgb(230, 53, 100);
				color: #fff;
				
			}
		}
		.default-tab{
			width: 100%;
			// padding: 20rpx 0;
			padding-top: 20rpx;
			padding-bottom: 20rpx;
			display: flex;
			justify-content: space-between;
			text-align: center;
			.tab{
				background-color: #ddd;
				color: #666;
				padding: 10rpx 20rpx;
				border-radius: 10rpx;
			}
			.tab-acx{
				padding: 10rpx 4px;
				vertical-align: middle;
				margin-right: 10rpx;
			}
			.active-tab{
				background-color: rgb(230, 53, 100);
				color: #fff;
				
			}
		}
		.xiangmu-list{
			.xiangmu{
				display: flex;
				width: 100%;
				border-bottom:  1rpx solid #999;
				.detail{
					width:calc(100% - 250rpx);
					padding-left: 20rpx;
					.name{
						font-size: 40rpx;
						font-weight: bold;
					}
					.buy{
						text-align: right;
						text{
							background-color: #e63564;
							display: inline-block;
							color: #fff;
							padding: 0 10rpx;
							border-radius: 10rpx;
						}
						
					}
				}
				
				
			}
		}
	}	
	.swiper-box{
		.swiper{
			.swiper-item{
				display: block;
				height: 300rpx;
				line-height: 300rpx;
				text-align: center;
			}
		}
	}
	.popup_mask {
		position: fixed;
		bottom: 0;
		top: 0;
		left: 0;
		right: 0;
		background-color: rgba(0, 0, 0, 0.4);
		transition-property: opacity;
		transition-duration: 0.3s;
		opacity: 0;
		z-index: 98;
		opacity: 1;	
	}

	.popup_content {
		overflow: hidden;
		box-sizing: border-box;
		padding: 40upx 20upx 0 20upx;
		position: fixed;
		bottom: 30%;
		border-radius: 8px;
		left: 50%;
		margin-left: -40%;
		right: 0;
		min-height: 400upx;
		background: #ffffff;
		width: 80%;
		z-index: 99;

		.title {
			text-align: center;
			font-size: 36upx;
			padding: 10upx 0 0 0;
		}

		.explain_text {
			font-size: 30upx;
			padding: 30upx 30upx 40upx 30upx;
			line-height: 60upx;

			.line {
				display: block;

				.path {
					color: #007aff;
					display: inline-block;
					text-align: center;
				}
			}
		}

		.button {
			display: flex;
			padding: 30upx 20upx;
			align-items: center;
			font-size: 34upx;
			justify-content: space-around;
			border-top: 2upx solid #f2f2f2;

			view {
				text-align: center;
			}
		}
	}	
</style>